<html lang="ja">
<head>
	<title>Matsutake Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.2');
</script>
<script type="text/javascript" src="matsutake.js"></script>


<script language="javascript">
<!--
var rakuten_id = "21c2dd5d9eb2733fb4128eaf6b935a26";
var query_result = null;
var start_index = 0;
var page_size = 3;
var layout_url = "layout.html";

	$(document).ready(function() {
		$("#search").click(function() {
						
			var query_url = "http://api.rakuten.co.jp/rws/2.0/json?";
			var params = {};
			
			params["developerId"] = rakuten_id;
			params["operation"] = "ItemSearch";
			params["callBack"] = "resultHandler";
			params["version"] = "2009-04-15";
			params["keyword"] = makeArray($("#keyword").val());

			$("#jsonp").remove();			
			$(document).append('<script language="text/javascript" id="jsonp" src="' + query_url + makeParameterClause(params) + '"></script>"');
//			$("#test").val(query_url + makeParameterClause(params));
		});
		
		
		Matsutake.parseURL(layout_url);
	});
	
	function setHandler() {
		$("#next").click(function() {
			start_index += page_size;
			show_result();
		});
		$("#prev").click(function() {
			start_index -= page_size;
			show_result();
		});
	}
	

	function show_result() {
		var ctx = {
			"items": query_result,
			"limit": query_result.length - page_size,
			"page_size": page_size,
			"start_index": start_index
		};
		
		
		$("#output").html(Matsutake.render(layout_url, ctx));

		setHandler();
	}	
	function resultHandler(arg){
		
		
		query_result = arg.Body.ItemSearch.Items.Item;
		start_index = 0;
		
		show_result();
	}
	
	function makeArray(str) {
		var result = [];
		var pos = 0;
		var spos = 0;
		while(-1 != (pos = str.indexOf(" ", spos))){
			result.push(str.substring(spos, pos));
			spos = pos + 1;
		}
		
		if (spos < str.length) {
			result.push(str.substring(spos));
		}
		
		return result;
	}
	function makeParameterClause(params){
		
		var buf = "";
		var param;
		for(var key in params){
			
			param = params[key];
			if (param.constructor === Array){
				for(var index = 0 ; index < param.length ; index++){
					if (buf.length > 0){
						buf += "&";
					}
					buf += key + "=" + encodeURI(param[index]);
				}
			}
			else {
				if (buf.length > 0){
					buf += "&";
				}
				buf += key + "=" + encodeURI(param);
			}
		}
		
		return buf;
	}
	
-->
</script>
</head>

<body>
	<input type="text" id="keyword" value="ビタミン">
	<input type="button" id="search" value="search">
	
	
    <div id="output">
    検索してください。
<!--
    <table border="1">
    <tr>
    	<th>No</th>
    	<th>itemName</th>
    	<th>shopName</th>
    	<th>photo</th>
    </tr>
    <tr m:array="${items}" m:iterator="item" m:start="${start_index}" m:count="${page_size}">
    	<td m:bind="${item_index}">1</td>
    	<td m:bind="${item.itemName}">商品名</td>
    	<td m:bind="${item.shopName}">店舗名</td>
    	<td><img src="${item.mediumImageUrl}"></td>
    </tr>
    </table>
    <input type="button" id="prev" value="prev" m:cond="${start_index} > 0">
    <input type="button" id="next" value="next" m:cond="${start_index} < ${limit}">
-->
    </div>
    
    
	<textarea id="test" rows="5" cols="50"></textarea>
</body>
</html>